<form nz-form class="search-form">
  <div nz-row>
    <div nz-col nzXXl="6" nzXl="6" nzLg="8" nzMd="12" nzSm="24">
      <nz-form-item nz-row>
        <nz-form-label nz-col nzSpan="8">
          用户账号
        </nz-form-label>
        <nz-form-control nz-col nzSpan="14">
          <input nz-input nzSize="default" [(ngModel)]="formModel['userNo']" name="userNo" id="userNo">
        </nz-form-control>
      </nz-form-item>
    </div>
    <div nz-col nzXXl="6" nzXl="6" nzLg="8" nzMd="12" nzSm="24">
      <nz-form-item nz-row>
        <nz-form-label nz-col nzSpan="8">
          用户姓名
        </nz-form-label>
        <nz-form-control nz-col nzSpan="14">
          <input nz-input nzSize="default" [(ngModel)]="formModel['userName']" name="userName" id="userName">
        </nz-form-control>
      </nz-form-item>
    </div>
    <div nz-col nzXXl="6" nzXl="6" nzLg="8" nzMd="12" nzSm="24">
      <nz-form-item nz-row>
        <nz-form-label nz-col nzSpan="8">
          性别
        </nz-form-label>
        <nz-form-control nz-col nzSpan="14">
          <nz-select name="userSex" [(ngModel)]="formModel['userSex']" nzPlaceHolder="---请选择---" nzAllowClear nzShowSearch>
            <nz-option *ngFor="let option of userSexList" [nzLabel]="option.label" [nzValue]="option.value"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
    </div>
    <div nz-col nzXXl="6" nzXl="6" nzLg="8" nzMd="12" nzSm="24">
      <nz-form-item nz-row>
        <nz-form-label nz-col nzSpan="8">
          手机号
        </nz-form-label>
        <nz-form-control nz-col nzSpan="14">
          <nz-input-group [nzSuffix]="suffixTemplate">
            <input type="text" nz-input [(ngModel)]="formModel['phone']" name="phone" placeholder="---请输入手机号---" />
          </nz-input-group>
          <ng-template #suffixTemplate>
            <i nz-icon nz-tooltip class="ant-input-clear-icon" nzTheme="fill" nzType="close-circle"
               *ngIf="formModel['phone']" (click)="formModel['phone'] = null"></i></ng-template>
        </nz-form-control>
      </nz-form-item>
    </div>
  </div>
  <div nz-row style="text-align: center;">
    <button nz-button nzType="primary" (click)="search()" nzSize="default" [nzLoading]="loading">
      <i class="anticon anticon-search"></i><span>查询</span>
    </button>
    <button nz-button (click)="reset();" nzSize="default" [nzLoading]="loading">
      <i class="anticon anticon-sync"></i><span>重置</span>
    </button>
  </div>
</form>

<div nz-row class="function-row">
  <div nz-col nzSpan="8" class="function-name">
    用户信息管理
  </div>
</div>

<ng-template #pageSizeTem>
  共{{page.totalRow}}条
</ng-template>
<div class="search-result-list">
  <nz-table #basicTable
            nzShowSizeChanger
            [nzShowTotal]="pageSizeTem"
            [nzTotal]="page.totalRow"
            [nzLoading]="loading"
            [(nzPageIndex)]="page.curPage"
            (nzPageIndexChange)="refreshData()"
            [(nzPageSize)]="page.pageSize"
            (nzPageSizeChange)="refreshData(true)"
            [nzData]="dataSet">
    <thead>
    <tr>
      <th>序号</th>
      <th>用户编号</th>
      <th>用户姓名</th>
      <th>年龄</th>
      <th>性别</th>
      <th>手机号</th>
      <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let data of basicTable.data; let i = index">
      <td>{{ i + 1 }}</td>
      <td>{{ data?.userNo }}</td>
      <td>{{ data?.userName }}</td>
      <td>{{ data?.userAge }}</td>
      <td>{{ data?.userSex }}</td>
      <td>{{ data?.phone }}</td>
      <td>
        <a>Modify</a>
        <nz-divider nzType="vertical"></nz-divider>
        <a>Delete</a>
      </td>
    </tr>
    </tbody>
  </nz-table>
</div>
